<script setup>
import { ref } from 'vue';
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue';

// 表格数据
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    count: 20,
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    count: 30,
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    count: 40,
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    count: 10,
  },
]);

// 选中的行数据
const selectedRows = ref([]);

// 表格实例
const tableRef = ref(null);

// 删除选中的行
const deleteSelectedRows = () => {
  if (selectedRows.value.length === 0) {
    alert('请先选择要删除的行！');
    return;
  }

  // 过滤掉选中的行
  tableData.value = tableData.value.filter(
    (row) => !selectedRows.value.includes(row)
  );

  // 清空选中状态
  tableRef.value.clearSelection();
  selectedRows.value = [];
};

// 弹窗状态
const dialogVisible = ref(false);

// 表单数据
const form = ref({
  date: '',
  name: '',
  address: '',
  count: '',
});

// 表单验证规则
const rules = ref({
  date: [{ required: true, message: '请输入日期', trigger: 'blur' }],
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
  count: [
    { required: true, message: '请输入数量', trigger: 'blur' },
    { type: 'number', message: '数量必须为数字', trigger: 'blur' },
  ],
});

// 提交表单
const submitForm = () => {
  // 在这里处理表单提交逻辑
  console.log('表单数据：', form.value);

  // 将表单数据添加到表格中
  tableData.value.push({
    date: form.value.date,
    name: form.value.name,
    address: form.value.address,
    count: Number(form.value.count), // 确保 count 是数字
  });

  dialogVisible.value = false; // 关闭弹窗
  alert('会员信息已提交！');
  resetForm(); // 重置表单
};

// 重置表单
const resetForm = () => {
  form.value = {
    date: '',
    name: '',
    address: '',
    count: '',
  };
};
</script>

<template>
  <div class="mb-4">
    <el-button type="primary" @click="dialogVisible = true">加入会员</el-button>
    <el-button type="success">导出excel表</el-button>
    <el-button type="info" @click="deleteSelectedRows">删除</el-button>
  </div>

  <el-card style="max-width: 1000px">
    <template #header>
      <div class="card-header">
        <span>信息</span>
      </div>
    </template>

    <el-table
      ref="tableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="(val) => (selectedRows = val)"
    >
      <!-- 选中列 -->
      <el-table-column type="selection" width="55" />

      <!-- 其他列 -->
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column label="count" width="180">
        <template #default="scope">
          <el-tag v-if="scope.row.count <= 10" type="danger">库存不足</el-tag>
          <el-tag v-else type="success">{{ scope.row.count }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="Address" />
      <el-table-column label="operates">
        <template #default="scope">
          <el-button @click="deleteSelectedRows">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 弹窗 -->
  <el-dialog v-model="dialogVisible" title="加入会员" width="500px">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
      <el-form-item label="日期" prop="date">
        <el-input v-model="form.date" placeholder="请输入日期" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address" placeholder="请输入地址" />
      </el-form-item>
      <el-form-item label="数量" prop="count">
        <el-input v-model.number="form.count" placeholder="请输入数量" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.mb-4 {
  margin-bottom: 1rem;
}
</style>